<template>
  <div class="container">
    <div class="header-content">
      <img class="logo" src="@/assets/image/header-content.webp" width="100%" alt="加载失败">
    </div>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="first" lazy>
        <div class="content-user">
          <h4>账号：{{ this.empInfo.empId }}</h4>
          <h2>姓名：{{ this.empInfo.empName }}</h2>
          <h3>电话：{{ this.empInfo.phone }}</h3>

          <el-button type="danger" plain @click="loginout">登出</el-button>

        </div>



      </el-tab-pane>

      <el-tab-pane label="修改信息" name="second">
        <div class="content-user">
          <div class="form-control">
            <el-form ref="form" :model="modify_form" label-width="80px">

              <el-form-item label="手机号">
                <el-input v-model="modify_form.phone"></el-input>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="modify_form.bossName"></el-input>
              </el-form-item>
              <el-form-item label="密码">
                <el-input v-model="modify_form.password"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="modify_Submit">确认</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="third">
        <div class="content-user">
          <div class="form-control">
            <el-form ref="form" :model="password_form" label-width="80px">


              <el-form-item label="旧密码">
                <el-input v-model="password_form.oldPassword"></el-input>
              </el-form-item>
              <el-form-item label="新密码">
                <el-input v-model="password_form.newPassword"></el-input>
              </el-form-item>
              <el-form-item label="确认密码">
                <el-input v-model="password_form.newPasswordAgain"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="modifyPassword_Submit">确认</el-button>
                <el-button>取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="管理发布的工作" name="fourth">
        <div class="btn-group">
          <el-button type="primary" @click="dialogAddFormVisible = true">发布工作</el-button>
          <el-button type="danger">删除选中</el-button>
          <el-dialog title="发布工作" :visible.sync="dialogAddFormVisible">
            <el-form :model="work_form">
              <el-form-item label="工作名称" :label-width="formLabelWidth">
                <el-input v-model="work_form.name" autocomplete="off" maxlength="25" placeholder="请输入工作名称 最大长度25个字"
                  show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="请选择类别" :label-width="formLabelWidth">
                <el-select v-model="work_form.category" placeholder="请选择工作分类">
                  <el-option label="计算机" value="计算机">计算机/互联网技术</el-option>
                  <el-option label="产品" value="产品">产品</el-option>
                  <el-option label="运营" value="运营">运营</el-option>
                  <el-option label="市场" value="市场">市场</el-option>
                  <el-option label="人事/财务/行政" value="人事/财务/行政">人事/财务/行政</el-option>
                  <el-option label="高级管理" value="高级管理">高级管理</el-option>
                  <el-option label="销售" value="销售">销售</el-option>
                  <el-option label="传媒" value="传媒">传媒</el-option>
                  <el-option label="金融" value="金融">金融</el-option>
                  <el-option label="教育培训" value="教育培训">教育培训</el-option>
                  <el-option label="医疗健康" value="医疗健康">医疗健康</el-option>
                  <el-option label="采购/贸易" value="采购/贸易">采购/贸易</el-option>
                  <el-option label="供应链/物流" value="供应链/物流">供应链/物流</el-option>
                  <el-option label="供应链/物流" value="供应链/物流">供应链/物流</el-option>
                  <el-option label="房地产/建筑" value="房地产/建筑">房地产/建筑</el-option>
                  <el-option label="咨询/翻译/法律" value="咨询/翻译/法律">翻译/咨询/法律</el-option>
                  <el-option label="旅游" value="旅游">旅游</el-option>
                  <el-option label="服务业" value="服务业">服务业</el-option>
                  <el-option label="生产制造" value="生产制造">生产制造</el-option>


                </el-select>
              </el-form-item>
              <el-form-item label="经验" :label-width="formLabelWidth">
                <el-input v-model="work_form.labels" autocomplete="off" maxlength="25" placeholder="工作时间,学历,经验(逗号隔开)"
                  show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="技能" :label-width="formLabelWidth">
                <el-input v-model="work_form.skill" autocomplete="off" maxlength="25" placeholder="(逗号隔开)"
                  show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="薪水" :label-width="formLabelWidth">
                <el-input v-model="work_form.galary" autocomplete="off" maxlength="10" placeholder="工资"
                  show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="福利" :label-width="formLabelWidth">
                <el-input v-model="work_form.welfare" autocomplete="off" maxlength="25" placeholder="(逗号隔开)"
                  show-word-limit></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="addJob">确 定</el-button>
            </div>
          </el-dialog>
          <el-dialog title="修改工作" :visible.sync="dialogModifyFormVisible">
            <el-form :model="work_form">
              <el-form-item label="工作名称" :label-width="formLabelWidth">
                <el-input v-model="work_form.name" autocomplete="off" maxlength="25" placeholder="请输入工作名称 最大长度25个字"
                  show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="请选择类别" :label-width="formLabelWidth">
                <el-select v-model="work_form.category" placeholder="请选择工作分类">
                  <el-option label="计算机" value="计算机">计算机/互联网技术</el-option>
                  <el-option label="产品" value="产品">产品</el-option>
                  <el-option label="运营" value="运营">运营</el-option>
                  <el-option label="市场" value="市场">市场</el-option>
                  <el-option label="人事/财务/行政" value="人事/财务/行政">人事/财务/行政</el-option>
                  <el-option label="高级管理" value="高级管理">高级管理</el-option>
                  <el-option label="销售" value="销售">销售</el-option>
                  <el-option label="传媒" value="传媒">传媒</el-option>
                  <el-option label="金融" value="金融">金融</el-option>
                  <el-option label="教育培训" value="教育培训">教育培训</el-option>
                  <el-option label="医疗健康" value="医疗健康">医疗健康</el-option>
                  <el-option label="采购/贸易" value="采购/贸易">采购/贸易</el-option>
                  <el-option label="供应链/物流" value="供应链/物流">供应链/物流</el-option>
                  <el-option label="供应链/物流" value="供应链/物流">供应链/物流</el-option>
                  <el-option label="房地产/建筑" value="房地产/建筑">房地产/建筑</el-option>
                  <el-option label="咨询/翻译/法律" value="咨询/翻译/法律">翻译/咨询/法律</el-option>
                  <el-option label="旅游" value="旅游">旅游</el-option>
                  <el-option label="服务业" value="服务业">服务业</el-option>
                  <el-option label="生产制造" value="生产制造">生产制造</el-option>


                </el-select>
              </el-form-item>
              <el-form-item label="经验" :label-width="formLabelWidth">
                <el-input v-model="work_form.labels" autocomplete="off" maxlength="25" placeholder="工作时间,学历,经验(逗号隔开)"
                  show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="技能" :label-width="formLabelWidth">
                <el-input v-model="work_form.skill" autocomplete="off" maxlength="25" placeholder="(逗号隔开)"
                  show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="薪水" :label-width="formLabelWidth">
                <el-input v-model="work_form.galary" autocomplete="off" maxlength="10" placeholder="工资"
                  show-word-limit></el-input>
              </el-form-item>
              <el-form-item label="福利" :label-width="formLabelWidth">
                <el-input v-model="work_form.welfare" autocomplete="off" maxlength="25" placeholder="(逗号隔开)"
                  show-word-limit></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="modifyJob">确 定</el-button>
            </div>
          </el-dialog>
        </div>
        <div class="content-user">

          <el-table :data="tableData" style="width:100%; text-align: center;" height="350" ref="multipleTable"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="工作名称" width="150">
              <template slot-scope="scope">

                <span style="margin-left: 5px">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="能力" width="350">
              <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                  {{ scope.row.skill }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="经验" width="200">
              <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                  {{ scope.row.labels }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="类别" width="100">
              <template slot-scope="scope">

                <span style="margin-left: 5px">{{ scope.row.category }}</span>
              </template>
            </el-table-column>
            <el-table-column label="薪水" width="150">
              <template slot-scope="scope">

                <span style="margin-left: 5px">{{ scope.row.galary }}</span>
              </template>
            </el-table-column>
            <el-table-column label="福利" width="300">
              <template slot-scope="scope">

                <span style="margin-left: 5px">{{ scope.row.welfare }}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否开启招聘" width="100">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.status" @change="activeChange(scope.row)" active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>


        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { empAPI } from '@/api/employerApi';
export default {
  data() {
    return {
      password_form: {
        EmpId: '',
        oldPassword: '',
        newPassword: '',
        newPasswordAgain: '',
      },
      modify_form: {
        id: '',
        password: '',
        bossName: '',
        phone: '',
      },
      empInfo: {
        empId: '',
        empName: '',
        phone: '',
        avatar: '',
      },
      companyInfo: {
        companyId: '',
        companyName: '',
        address: '',
      },
      tableData: [],
      activeName: 'first',
      dialogAddFormVisible: false,
      dialogModifyFormVisible: false,
      work_form: {
        bossId: '',
        companyId: '',
        name: '',
        skill: '',
        category: '',
        status: '',
        galary: '',
        welfare: '',
        labels: '',
      },
      formLabelWidth: '120px',
      work_form_List: [],
    }
  },
  mounted() {
    let employerId = this.$route.query.employerId;
    //console.log('id', employerId)
    empAPI.EmpAndCompany(employerId).then(res => {
      const data = res.data.data[0];
      this.empInfo.empId = data.id;
      this.empInfo.empName = data.name;
      this.empInfo.phone = data.phone;
      this.avatar = data.avatar;
      this.companyInfo.companyId = data.companyId;
      this.companyInfo.companyName = data.companyName;
      this.companyInfo.address = data.address;
    })

  },
  methods: {
    // 修改招聘状态
    activeChange(row) {
      this.work_form = row
      this.work_form.status == true ? this.work_form.status = 1 : this.work_form.status = 0

      this.work_form_List.length = 0
      this.work_form_List.push(row)
      empAPI.modifyJob(this.work_form_List).then(res => {
        this.work_form_List.length = 0;
        this.dialogModifyFormVisible = false
        if (res.data.code == '1') {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.tableData.length = 0;
          empAPI.getAddJobs(this.empInfo.empId).then(res => {
            let data = res.data.data
            data.forEach(item => {
              item.status == '1' ? item.status = true : item.status = false;
              this.tableData.push(item)
            })
          })
        } else {
          this.$message({
            type: 'error',
            message: '修改失败!'
          })
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '修改失败!'
        })
      })
    },

    //编辑工作
    handleEdit(index, row) {
      this.dialogModifyFormVisible = true
      this.work_form = row

      this.work_form.status == true ? this.work_form.status = 1 : this.work_form.status = 0
      this.work_form_List.push(this.work_form)
    },
    modifyJob() {
      empAPI.modifyJob(this.work_form_List).then(res => {
        this.work_form_List.length = 0;
        this.dialogModifyFormVisible = false
        if (res.data.code == '1') {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.tableData.length = 0;
          empAPI.getAddJobs(this.empInfo.empId).then(res => {
            let data = res.data.data
            data.forEach(item => {
              item.status == '1' ? item.status = true : item.status = false;
              this.tableData.push(item)
            })
          })
        } else {
          this.$message({
            type: 'error',
            message: '修改失败!'
          })
        }
      }).catch(err => {
        this.$message({
          type: 'error',
          message: '修改失败!'
        })
      })

    },
    addJob() {

      this.dialogAddFormVisible = false;
      this.work_form.bossId = this.empInfo.empId;
      this.work_form.companyId = this.companyInfo.companyId;
      this.work_form.status = 0
      empAPI.addJob(this.work_form).then(res => {
        //  console.log(res.data)
        if (res.data.code != 0) {
          this.$message({
            type: 'success',
            message: '添加成功！'
          })
          this.tableData.length = 0;
          empAPI.getAddJobs(this.empInfo.empId).then(res => {
            let data = res.data.data
            data.forEach(item => {
              item.status == '1' ? item.status = true : item.status = false;
              this.tableData.push(item)
            })

          })

        } else {
          this.$message({
            type: 'error',
            message: '添加失败！'
          })
        }

      }).catch(err => {
        this.$message({
          type: 'error',
          message: '添加失败！'
        })
      })


    },
    handleDelete(index, row) {
      this.work_form = row;
      this.work_form.status == true ? this.work_form.status = 1 : this.work_form.status = 0
      empAPI.deleteJob(this.work_form).then(res => {
        if (res.data.code == '1') {
          this.$message({
            type: 'success',
            message: '删除成功！'
          })
          this.tableData.length = 0;
          empAPI.getAddJobs(this.empInfo.empId).then(res => {
            let data = res.data.data
            data.forEach(item => {
              item.status == '1' ? item.status = true : item.status = false;
              this.tableData.push(item)
            })
          })
        } else {
          this.$message({
            type: 'error',
            message: '删除失败！'
          })
        }
      }).catch(error => {
        this.$message({
          type: 'error',
          message: '删除失败！'
        })
      })

    },


    // getUserResume() {
    //   userAPI.getResume(this.userInfo.userId).then(res => {
    //     let fileName = this.userInfo.userName + '.pdf'
    //     this.handle(res.data, fileName)
    //   });
    // },
    handle(data, fileName) {
      // 文件导出
      if (!data) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([data], { type: 'application/pdf' }))

      const a = document.createElement('a')
      a.style.display = 'none'
      a.download = fileName
      a.href = url
      a.click()
      if (document.body.contains(a)) {
        document.body.removeChild(a)
      }
    },
    loginout() {
      localStorage.removeItem('user_info')
      this.$router.push('/login')

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      //console.log("val", val)
    },

    //获取工作列表
    handleClick(tab, event) {
      if (tab.name == 'fourth') {
        this.tableData.length = 0;
        empAPI.getAddJobs(this.empInfo.empId).then(res => {
          let data = res.data.data
          data.forEach(item => {
            item.status == '1' ? item.status = true : item.status = false;
            this.tableData.push(item)
          })

        })
      }
    },
    modifyPassword_Submit() {
      this.password_form.EmpId = this.empInfo.empId;

      empAPI.changePassword(this.password_form).then(res => {
        //?这里判断一下

        if (res.data.code == 0) {
          this.$message({
            message: "修改密码失败",
            type: "error"
          })

        } else {
          this.$message({
            message: "修改密码成功",
            type: "success"
          })
        }

      }).catch(error => {
        this.$message({
          message: "修改密码失败",
          type: "error"
        })
      })

    },
    modify_Submit() {
      this.modify_form.id = this.empInfo.empId;
      empAPI.EmpModify(this.modify_form).then(res => {
        if (res.data.code == 0) {
          this.$message({
            message: "修改失败",
            type: "error"
          })

        } else {
          this.$message({
            message: "修改成功",
            type: "success"
          })
        }
      }).catch(error => {
        this.$message({
          message: "修改失败",
          type: "error"
        })

      })

    },

  }
}
</script>

<style lang="less" scoped>
.form-control {
  width: 41%;
  height: auto;
  margin: auto;
  text-align: center;
  font-size: large;

  .el-radio-group>.el-radio {
    text-align: start;
    margin: 0px 50px;
  }

  .el-button {
    margin: 0px 50px;
  }
}

.el-tab-pane {
  transition: all 2s;
}

.el-tabs {
  margin: 10px 10px;
  height: 50px;

}

/deep/ .el-tabs__nav-scroll {
  background-color: #95a5a6;
  border-radius: 5px;
}

.header-content {
  height: 100%;
  width: 100%;
}

.logo {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  overflow: hidden;
  border-radius: 5px;

}

.logo:hover {
  transform: scale(1.05);
  transition: all 0.5s;
  overflow: hidden;
  box-shadow: 0px 0px 10px #bdc3c7;
}


.content-user {
  background-color: #ecf0f1;
  margin-top: 2%;
  padding: 3%;
  border-radius: 10px;
  border: 1px skyblue solid;
  transition: all 0.5s;
  color: #34495e;
  max-height: max-content;
}

.content-user:hover {
  box-shadow: 0px 0px 20px #bdc3c7;
  transition: all 0.5s;

}
</style>